<template>
    <div>
        <el-breadcrumb >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >编辑用户</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width:500px;margin-top:20px;">
            <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" :disabled="true"></el-input>
            </el-form-item>
            
            <el-form-item label="性别" prop="sex">
            <el-radio class="radio" v-model="ruleForm.sex" label="男">男</el-radio>
            <el-radio class="radio" v-model="ruleForm.sex" label="女">女</el-radio>
            </el-form-item>

            <el-form-item prop="date" label="生日">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"  @change="datechange" style="width: 100%;" ></el-date-picker>
            </el-form-item>
            <el-form-item label="状态" prop="status">
            <el-switch on-text="启用" off-text="禁用" v-model="ruleForm.status"></el-switch>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {mapGetters} from 'vuex';
import Axios from 'axios'
export default{
    data(){
        return{
            time:'',
            ruleForm: {
                name: '',
                password: '',
                sex: '男',
                date: '',
                status:true,
            },
            rules: {
                date: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            },
        }
    },
    methods:{
        ...mapGetters(['name','pass']),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                Axios({
                    method:"post",
                    url:'http://localhost:3000/users/update',
                    data:{
                        name:this.ruleForm.name,
                        password:this.ruleForm.password,
                        sex:this.ruleForm.sex,
                        date:this.time,
                        status:this.ruleForm.status,
                    },
                    dataType:'json',
                }).then((d)=>{
                    
                    if(d.data){
                        this.$message({
                        showClose: true,
                        message: '修改成功！',
                        type: 'success'
                        });
                    }
                })
            } else {
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        datechange(val){
            this.time = val;
        }
    },
    created(){
        this.ruleForm.name = this.$store.getters.name;
        this.ruleForm.password = this.$store.getters.pass;
    }
 
}
</script>